<template>
  <div class="user-manager">
    <Table :loading="loading" border :columns="columns" :data="users"></Table>
    <Modal title="警告!" v-model="showModal" class-name="vertical-center-modal" @on-ok="deleteUser">
      <p class="info">确认删除该用户？</p>
    </Modal>
  </div>
</template>
<script>
import { getUsers } from "@/api";
export default {
  name: "UserManager",
  data() {
    return {
      loading: false,
      columns: [
        {
          title: "用户名",
          align: "center",
          key: "userName"
        },
        {
          title: "邮箱",
          align: "center",
          key: "email"
        },
        {
          title: "注册时间",
          align: "center",
          key: "createdAt"
        },
        {
          title: "操作",
          key: "action",
          width: 450,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    disabled: this.users[params.index].canMange,
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "开启权限"
              ),
              h(
                "Button",
                {
                  style: {
                    marginRight: "5px"
                  },
                  props: {
                    type: "error",
                    disabled: !this.users[params.index].canMange,
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "关闭权限"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.reset(params.index);
                    }
                  }
                },
                "重置密码"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.curIndex = params.index;
                      this.showModal = true;
                    }
                  }
                },
                "删除用户"
              )
            ]);
          }
        }
      ],
      users: []
    };
  },
  async mounted() {
    this.users = await getUsers();
  },
  methods: {
    show() {},
    remove() {},
    reset() {},
    deleteUser() {}
  }
};
</script>

<style lang="scss" scoped>
.user-manager {
  width: 100%;
  height: 100%;
  padding: 1rem;
}
/deep/ .ivu-table-tip {
  overflow: hidden;
}
</style>